<template>
  <nav>
    <div class="container">
      <header>
        <div class="logo">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-app"></use>
          </svg>
        </div>
        <div class="nav">
          <li>首页</li>
          <li>资源</li>
          <li>公众号</li>
        </div>
        <div class="search">
          <i class="iconfont icon-8search"></i>
          <input type="text" />
        </div>
      </header>
    </div>
  </nav>
</template>

<script>
</script>

<style lang="scss" scoped>
nav {
  width: 100%;
  background-color: $bg-primary;
  color: white;
  @include shadow();
  margin: 0;
  header {
    padding: 1rem 0;
    width: 90%;
    margin: 0 auto;
    display: flex;
    gap: 3rem;
    align-items: center;
    .logo {
      .icon {
        width: 1.8rem;
        height: 1.8rem;
      }
    }
    .nav{
        display: flex;
        gap: 1rem;
        font-weight: bold;
        font-size: 20px;
        // background-color: pink;
        li{
            list-style: none;

        }
    }
    .search{
      margin-left: auto;
      display: flex;
      align-items: center;
      .iconfont{
        color:var(--text-color);
        transform: translateX(1.4rem);
      }
      input{
        border:none;
        padding: 0.4rem;
        padding-left: 1.8rem;
        border-radius: 0.3rem;
        background-color: $bg-primary-darker;
        color:white;
        &:focus{
          outline: none;
        }
      }
    }
    
  }
}
</style>